<template>
  <div class="header">
    <div class="header_left">
      <div class="header_img">
        <div class="dia_img"></div>
        <div class="cir-img"></div>
      </div>
      <div class="header_left-title">Duweteroz</div>
    </div>
    <div @click="outLogin">{{ userInfo.name }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "测试",
      userInfo: {},
    };
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    console.log(
      "🚀 ~ file: index.vue:24 ~ mounted ~ this.userInfo :",
      this.userInfo
    );
  },
  methods: {
    outLogin() {
      this.$router.push("/");
      localStorage.setItem("token", "");
      localStorage.setItem("userInfo", "");
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  box-sizing: border-box;
  line-height: 40px;
  padding: 27px 37px;
  display: flex;
  justify-content: space-between;
  background: rgba(244, 246, 251, 1);

  border: 1px solid rgba(41, 41, 41, 0.11);
  .header_left {
    display: flex;
    .header_left-title {
      margin-left: 20px;
    }
  }
  .header_img {
    //   margin: 27px 37px;
    // position: relative;
    .dia_img {
      //   position: absolute;
      left: 42px;
      top: 30px;
      width: 20px;
      height: 20px;
      opacity: 1;
      transform: rotate(45deg);
      background: rgba(31, 20, 57, 1);
    }
    .cir-img {
      //   position: absolute;
      left: 42px;
      top: 42px;
      width: 20px;
      height: 20px;
      opacity: 0.5;
      border-radius: 50%;
      background: rgba(31, 20, 57, 1);
    }
  }
}
</style>
